import Svg from "@/components/base/Svg"
import ModalSlideUp from "@/components/composite/ModalSlideUp/main"
import { useSearchAction } from "@/features/useSearchAction"
import styled from "@emotion/styled"
import { useAtom } from "jotai"
import { useCallback } from "react"
import { balanceBtnStateAtom } from "../atom"
import kycRequiredMethods from "@/features_signal/kycRequiredMethods"

// 按钮属性接口
interface BalanceButtonProps {
    color: string
    name: string
    shadowColor?: string
}
interface BalanceButtonColor {
    color: string
    shadowColor?: string
}

const ButtonContainer = styled.div<BalanceButtonColor>`
    display: flex;
    align-items: center;
    justify-content: center;
    width: 158rem;
    height: 40rem;
    background-color: ${(props) => props.color};
    border-radius: 8rem;
    cursor: pointer;
    padding: 0 16rem;
    // 添加底部阴影（粉色发光）
    box-shadow: 0 1rem 0 0 ${(props) => props.shadowColor};
    &:first-of-type {
        margin-right: 3rem;
    }
`

const ButtonIcon = styled.img`
    width: 20rem;
    height: 20rem;
    margin-right: 4rem;
`

const ButtonText = styled.div`
    font-family: Gilroy;
    font-weight: 700;
    font-size: 14rem;
    color: #131416;
    text-transform: capitalize;
`

const BalanceButton: React.FC<BalanceButtonProps> = ({ color, name, shadowColor }) => {
    const [buttonState, setButtonState] = useAtom(balanceBtnStateAtom)
    const { setAction } = useSearchAction()

    const handleClick = useCallback(() => {
        kycRequiredMethods.execute(name.toLowerCase() as "deposit" | "withdraw", async (status) => {
            switch (name.toLowerCase()) {
                case "deposit":
                    setButtonState({ name, clicked: true })
                    setAction("deposit")
                    break
                case "withdraw":
                    setButtonState({ name, clicked: true })
                    setAction("withdraw")
                    break
            }
        })
    }, [name, setAction, setButtonState])

    // 根据 name 动态选择图标
    const getIcon = () => {
        switch (name.toLowerCase()) {
            case "deposit":
                return <Svg src="pages/UserCenterPage/deposit.svg" />
            case "withdraw":
                return <Svg src="pages/UserCenterPage/withdraw_1.svg" />
            default:
                return null
        }
    }

    const iconSrc = getIcon()
    return (
        <ButtonContainer
            color={color}
            onClick={handleClick}
            shadowColor={shadowColor}
        >
            {iconSrc}
            <ButtonText>{name}</ButtonText>
            <ModalSlideUp familyName="deposit" />
        </ButtonContainer>
    )
}

export default BalanceButton
